<!-- 优惠券首页 -->
<template>
	<div class="bg">
		<div class="headSearch">
			<div class="searchbox">
				<div class="searchImage"><img src="../../assets/images/chaxun.png" width="100%" /></div>
				<input type="text" class="headsearchinput" placeholder="输入券名称进行模糊查询" v-model="searchInput" />
			</div>
			<div class="searchbtn" @click="clickSearch">搜索</div>
		</div>
		<van-tabs v-model="active" @change="chooseKind" sticky swipeable animated lazy-render>
			<van-tab title="全部"><DiscountList @nowGet="nowGet" :list="list" useStatues="unclaimed" /></van-tab>
			<van-tab title="满减"><DiscountList @nowGet="nowGet" :list="reciveList" useStatues="unclaimed" /></van-tab>
			<van-tab title="立减"><DiscountList @nowGet="nowGet" :list="knockList" useStatues="unclaimed" /></van-tab>
			<van-tab title="折扣"><DiscountList @nowGet="nowGet" :list="discountList" useStatues="unclaimed" /></van-tab>
		</van-tabs>
		<div class="backTop">
			<div @click="rightShare"><img src="../../assets/images/分享@2x.png" width="100%" /></div>
			<div @click="backTop"><img src="../../assets/images/置顶@2x.png" width="100%" /></div>
		</div>
		<!-- 分享窗口 -->
		<van-overlay :show="shareShow" @click="shareShow = false;flagImg=true">
			<div class="myselfShare">
				<div class="saveImage2" v-show="!flagImg"><img  :src="ip" alt="" /></div>
				<div class="saveImage" ref="saveImage" v-show="flagImg">
					<div class="header">
						<div class="headerImage"><img style="width: 100%;height: 100%;" :src="shareInfo.avatar || imgDafult" alt="" /></div>
						<div class="headerInfo">
							<div class="name">{{ shareInfo.employeeName }}</div>
							<div class="time">{{ shareInfo.date }}分享</div>
						</div>
					</div>
					<div class="storeInfo">
						<div class="name">{{ shareInfo.name }}</div>
						<div class="detailInfo mt">
							<div class="icon"><img src="../../assets/phone.png" width="100%" /></div>
							<div class="gary">{{ shareInfo.phone }}</div>
						</div>
						<div class="detailInfo">
							<div class="icon"><img src="../../assets/address.png" width="100%" /></div>
							<div class="gary">{{ shareInfo.address }}</div>
						</div>
					</div>

					<div class="bigImage"><img :src="publicityImg" width="100%" /></div>

					<div class="footer">
						<div class="info">
							<div>惊喜不断，倾情奉献</div>
							<div>扫码参与</div>
						</div>
						<div class="codeImage"><img style="width: 100%;height: 100%;" :src="codeImage" alt="" /></div>
					</div>
				</div>
				<div class="saveBtn" @click.stop="saveImage">长按保存图片</div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
import wx from 'weixin-js-sdk';
import html2canvas from 'html2canvas';
import DiscountList from '../../components/DiscountList';
var preD = function (e) {
    e.preventDefault()
}
export default {
	components: {
		DiscountList
	},
	data() {
		return {
			flagShow:0,
			flagImg:true,
			ip: null,
			imgDafult: require('@/assets/avatar.png'),
			listImg: [require('../../assets/1.png'), require('../../assets/2.png'), require('../../assets/3.png')],
			publicityImg: null, //背景
			codeImage: null,
			active: 0, //tabs激活下标
			list: [], //优惠券列表
			rightShow: false, //右侧分享与置顶状态
			merchantCode: 31000001, //商家编码
			reciveDiscountID: '', //保存当前领取的优惠券ID，领取优惠券函数reciveDiscount()用到
			searchInput: '', //顶部搜索输入框的值,
			shareShow: false,
			shareInfo: '' //分享弹窗数据
		};
	},
	watch: {
		shareShow(val) {
			if (val) {
				document.body.style.overflow = 'hidden';
				document.addEventListener('touchmove', preD, { passive: false }); // 禁止页面滑动
			} else {
				document.body.style.overflow = ''; // 出现滚动条
				document.removeEventListener('touchmove', preD, { passive: false });
			}
		}
	},
	computed: {
		reciveList() {
			return this.list.filter(item => {
				return item.type == 1;
			});
		},
		knockList() {
			return this.list.filter(item => {
				return item.type == 2;
			});
		},
		discountList() {
			return this.list.filter(item => {
				return item.type == 3;
			});
		}
	},
	created() {
		let merchantCode = localStorage.getItem('merchantCode') || '';
		let employeeId = localStorage.getItem('employeeId') || '';
		if (employeeId == '') {
			localStorage.setItem('employeeId', this.$route.query.employeeId);
		}
		if (employeeId != this.$route.query.employeeId && this.$route.query.employeeId != undefined) {
			localStorage.setItem('employeeId', this.$route.query.employeeId);
		}
		if (merchantCode == '') {
			localStorage.setItem('merchantCode', this.$route.query.merchantCode);
		}
		if (merchantCode != this.$route.query.merchantCode && this.$route.query.merchantCode != undefined) {
			localStorage.setItem('merchantCode', this.$route.query.merchantCode);
		}
		this.getCounstList(); //获取优惠券列表
	},
	mounted() {
		// 屏幕滑动触发右侧分享和回到置顶设置函数
		// window.addEventListener("scroll", this.windowScroll);
	},
	methods: {
		// 屏幕滚动判断分享和回到顶面显示
		// windowScroll() {
		//   let scroll =
		//     document.documentElement.scrollTop || document.body.scrollTop;
		//   if (scroll >= 200 && this.rightShow == false) {
		//     this.rightShow = true;
		//   } else if (scroll < 200 && this.rightShow == true) {
		//     this.rightShow = false;
		//   }
		// },
		//获取总优惠券列表
		getCounstList() {
			let params = {
				merchantCode: localStorage.getItem('merchantCode'), //门店code
				type: this.reciveDiscountID, //优惠券类型(1-满减,2-立减,3-折扣)
				couponName: this.searchInput //优惠券名字
			};
			this.$api.list(params).then(res => {
				res.data.map(val => {
					if (!!val.availableDeal) {
						val.availableDeal = val.availableDeal.split(',');
					}
				});
				this.list = res.data;
			});
		},
		//点击上方功能类型切换
		chooseKind() {
			console.log(`触发tabs类型切换${this.active}`);
		},
		//立即领取
		nowGet(data) {
			this.reciveDiscountID = data; //保存当前领取的优惠券ID
			//如果已经登录就不需要再弹窗了，直接领取
			if (this.loginState) {
				this.reciveDiscount(); //调用领取优惠券函数
			} else {
				this.popShow = true; //没有登录，底部弹窗并录入信息登录
			}
		},
		//点击取消
		sheetCancelBtn() {
			console.log('触发关闭');
			this.popShow = false;
		},
		sendCode() {
			console.log('触发发送验证码');
		},
		noCat() {
			console.log('点击无车/无牌');
		},
		rightShare() {
			window.scrollTo(0,0);
			let params = {
				merchantCode: localStorage.getItem('merchantCode'),
				employeeId: localStorage.getItem('employeeId') //操作人id
			};
			if(this.flagShow==0){
			this.$api.share(params).then(res => {
				if ((res.code = '10000')) {
					// var string = res.replace("/\\","")
					this.shareInfo = res.data;
				}
			});
				this.getCode();
			}
				this.publicityImg = this.listImg[Math.floor(Math.random() * this.listImg.length)];
			this.shareShow = true;
			this.$nextTick()
			setTimeout(() => {
				this.draw()
			}, 1000);
		},
		draw(){
			html2canvas((this.$refs.saveImage),{
			    useCORS: true,
			    allowTaint: true, //允许污染
					backgroundColor: null,
					scale:window.devicePixelRatio,
					tainttest: true,
					logging: true,
			  }).then(canvas => {
					this.ip = canvas.toDataURL("image/png");
					this.flagImg=false
					this.$nextTick();
			})
		},
		getCode() {
			this.$http
				.post(
					'https://autodt-gateway.yunchefu.cn/message/wechat/miniAppQrCode',
					{ appId: 'wx7451a1aa96196cd1', path: '/pages/redirect/index?from=merchantCouponList&merchantCode=' + localStorage.getItem('merchantCode') },
					{
						headers: {},
						responseType: 'blob'
					}
				)
				.then(res => {
					this.codeImage = URL.createObjectURL(res);
					this.flagShow=1
				});
		},
		backTop() {
			window.scrollTo(0, 0);
			console.log('点击右侧置顶按钮');
		},
		clickSearch() {
			this.getCounstList();
		},
		//点击保存图片
		saveImage() {
			let { saveImage } = this.$refs;
			html2canvas(saveImage).then(canvas => {
				let imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); // 获取生成的图片的url
				let a = document.createElement('a');
				// wx.downloadImage({})
				a.href = imgUri;
				let fileName = Math.random() * (999999999999999 - 100000000000000) + 100000000000000 - 1 + '.jpg';
				a.download = fileName;
				a.click();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .van-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
}
.headSearch {
	display: flex;
	justify-content: space-between;
	background: red;
	align-items: center;
	padding: 20px;
	.searchbox {
		height: 70px;
		line-height: 70px;
		border-radius: 35px;
		width: 550px;
		background: white;
		display: flex;
		.searchImage {
			padding: 0 20px;
			width: 50px;
			display: flex;
			align-items: center;
		}
		.headsearchinput {
			height: 70px;
			line-height: normal;
			border-radius: 35px;
			flex: 1;
			border: 0;
			box-sizing: border-box;
			font-size: 30px;
		}
	}
	.searchbtn {
		font-size: 30px;
		color: white;
	}
}
.userImageDiv {
	display: flex;
	align-items: center;

	.userImage {
		height: 80px;
		width: 80px;
		margin: 16px 30px;
	}

	.userName {
		font-size: 28px;
		color: #272727;
	}
}

/deep/ .van-list {
	background-color: #f1f1f1;
}
/deep/ .van-tab__text {
	font-size: 28px;
	color: #272727;
}
/deep/ .van-tab.van-tab--active.van-ellipsis .van-tab__text {
	color: #ef3b4f;
}
/deep/ .van-tabs__wrap.van-hairline--top-bottom {
	height: 116px !important;
}
/deep/ .van-tab.van-ellipsis {
	line-height: 116px;
}
/deep/ .van-tabs__line {
	width: 80px;
	height: 6px;
	background-color: #ef3b4f;
}
/deep/ [class*='van-hairline']::after {
	border: 0;
}
.sheetCancelBtn {
	height: 36px;
	width: 36px;
	display: block;
	margin: 47px 60px 47px auto;
}
.actionSheetContent {
	padding: 0 50px;
	.actionSheetContentTitle {
		font-size: 34px;
	}
	.inputStyle {
		margin-bottom: 28px;
		input {
			font-size: 28px;
			margin-left: 30px;
			color: #272727;
			border: 1px solid #cdcdcd;
			border-radius: 10px;
			height: 90px;
		}
		.phone {
			box-sizing: border-box;
			padding-left: 34px;
			width: 457px;
		}
		.code {
			box-sizing: border-box;
			padding-left: 34px;
			width: 296px;
		}
		// .catNumTwo {
		//   position: relative;
		//   .catNum {
		//     box-sizing: border-box;
		//     padding-left: 34px;
		//     width: 296px;
		//   }
		//   .catNumI {
		//     height: 40px;
		//     position: absolute;
		//     display: inline-block;
		//     top:4px;
		//     left: 128px;
		//     border-left:1px solid #cdcdcd;
		//   }
		// }
		.catNumTwoInput {
			display: inline-block;
			border: 1px solid #cdcdcd;
			border-radius: 10px;
			margin-left: 30px;
			position: relative;
			.leftInput {
				margin: 0;
				padding-left: 34px;
				box-sizing: border-box;
				width: 94px;
				border: 0;
			}
			.rightInput {
				box-sizing: border-box;
				margin-left: 0;
				padding-left: 34px;
				border: 0;
				width: 200px;
			}
			.catNumI {
				position: relative;
				top: 2px;
				height: 40px;
				display: inline-block;
				border-left: 1px solid #cdcdcd;
			}
		}
		.inputMethodStyle {
			color: #4883c0;
			font-size: 28px;
			margin-left: 30px;
		}
	}
	button {
		width: 100%;
		height: 90px;
		display: block;
		color: #ffffff;
		font-size: 34px;
		border-radius: 10px;
		background-color: #ef3b4f;
		border: 0;
		margin: 60px 0;
	}
}
.backTop {
	position: fixed;
	top: 45%;
	right: 30px;
	> div {
		height: 84px;
		width: 84px;
		&:first-of-type {
			margin-bottom: 50px;
		}
	}
}
.myselfShare {
	display: flex;
	flex-direction: column;
	align-items: center;
	.saveImage2 img{
		width: 664px;
		height: 896px;
		border-radius: 20px;
		// margin-top: -150px;
	}
	.saveImage {
		// margin-top: -150px;
		width: 620px;
		height: 852px;
		// background: #fff;
		border-radius: 20px;
		background-image: url(../../assets/share.png);
		background-size: 100% 100%;
		padding: 20px;
		.header {
			display: flex;
			// background: #ef3b4f;
			.headerImage {
				height: 90px;
				width: 90px;
				border-radius: 5px;
			}
			.headerInfo {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				color: white;
				.name {
					padding-left: 20px;
					font-size: 28px;
				}
				.time {
					padding-left: 20px;
					font-size: 24px;
				}
			}
		}
		.storeInfo {
			// display: flex;
			// flex-direction: column;
			// height: 140px;
			// justify-content: space-between;
			// padding: 20px 0;
			// margin-top: 50px;
			margin-top: 70px;
			.name {
				font-size: 32px;
				color: #272727;
			}
			.mt {
				margin-top: 19px;
			}
			.detailInfo {
				margin-bottom: 19px;
				display: flex;
				align-items: center;
				.icon {
					// height: 25px;
					width: 30px;
				}
				.gary {
					color: gray;
					padding-left: 10px;
					font-size: 26px;
				}
			}
		}
		.bigImage {
			width: 100%;
			height: 300px;
			overflow: hidden;
		}
		.footer {
			margin-top: 20px;
			display: flex;
			justify-content: flex-end;
			.info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
				> div {
					font-size: 28px;
					color: #272727;
				}
			}
			.codeImage {
				height: 180px;
				width: 180px;
				// background: black;
				margin-left: 20px;
			}
		}
	}
	.saveBtn {
		// position: absolute;
		width: 400px;
		height: 90px;
		border-radius: 100px;
		background: #ef3b4f;
		color: white;
		text-align: center;
		line-height: 90px;
		font-size: 28px;
		margin-top: 30px;
	}
}
</style>
